@import "color.less";
/* 详情 */
.detail-content {
  textarea{
    resize: none;
    font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder{
    color: @color-blue-text;
  }
  textarea,input{
    color: #fff;
    background: transparent;
    border: 1px solid @color-blue-text;
  }
  .ml50{
    margin-left: 50px;
  }
  .bd-tr{
    position: absolute;
    top: -8px;
    right: -4px;
  }
  .bd-bl{
    position: absolute;
    bottom: -8px;
    left: -4px;
  }
  .detail{
    font-size: 14px;
  }
  .img-box{
    position: relative;
    float: left;
    display: inline-block;
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
  }
  #img{
    opacity: .8;
    max-width: 90%;
    max-height: 90%;
    *margin-top: ~"expression((400 - this.height ) / 2)"; /* CSS表达式用来兼容IE6/IE7 */
    vertical-align: middle;
  }
  .detail-right,
  .comment-in{
    position: relative;
    float: right;
    display: inline-block;
    width: 470px;
    padding: 15px 20px 20px 20px;
    box-shadow: inset 0 0 3px @color-blue-text;
  }
  .detail-right::before,
  .detail-right::after,
  .comment-in::before,
  .comment-in::after{
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: -8px;
    border: 1px solid @color-blue-text;
  }
  .detail-right::before,
  .detail-right::after{
    animation: clipMe1 6s linear infinite;
  }
  .comment-in::before,
  .comment-in::after{
    animation: clipMe2 6s linear infinite;
  }
  .detail-right::before,
  .comment-in::before{
    animation-delay: -3s;
  }
  @keyframes clipMe1 {
    0%, 100% {
      clip: rect(0px, 486px, 1px, 0px);
    }
    25% {
      clip: rect(0px, 1px, 216px, 0px);
    }
    50% {
      clip: rect(215px, 486px, 216px, 0px);
    }
    75% {
      clip: rect(0px, 486px, 216px, 485px);
    }
  }
  @keyframes clipMe2 {
    0%, 100% {
      clip: rect(0px, 486px, 1px, 0px);
    }
    25% {
      clip: rect(0px, 1px, 186px, 0px);
    }
    50% {
      clip: rect(185px, 486px, 186px, 0px);
    }
    75% {
      clip: rect(0px, 486px, 186px, 485px);
    }
  }
  .detail-right{
    height: 200px;
  }
  .detail-text{
    padding: 5px 0;
  }
  .detail-text>div{
    display: inline-block;
  }
  .detail-text>div>font{
    display: inline-block;
    padding-right: 10px;
  }
  #remark{
    display: inline-block;
    width: 370px;
    height: 50px;
  }
  .comment-in{
    height: 170px;
    margin-top: 30px;
  }
  #inContent{
    margin-top: 10px;
  }
  #inName,
  #inContent{
    width: 100%;
    padding: 8px 10px;
    outline: 0;
    transition: box-shadow .2s;
  }
  #inName:focus,
  #inContent:focus{
    box-shadow: inset 0 0 5px @color-blue-bg;
  }
  .btn{
    position: relative;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    margin-top: 5px;
    color: @color-blue-text;
    text-align: center;
    border: 1px solid @color-blue-text;
  }
}
.detail-comment{
  position: relative;
  margin-top: 30px;
  padding: 20px;
  font-size: 14px;
  border: 1px solid @color-blue-text;
  #commentList{
    &>div:first-child{
      border-top: 1px dashed @color-blue-text;
    }
    &>div{
      border-bottom: 1px dashed @color-blue-text;
    }
  }
}
